<template>
  <!-- 我的资源内容 -->
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" v-show="!show">
      <el-tab-pane
        v-for="tab in tabList"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
        <div style="overflow: hidden">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="primary"-->
<!--            @click="drwd"-->
<!--            v-if="tab.type != 0"-->
<!--            style="float: left"-->
<!--            >导出为文档</el-button-->
<!--          >-->
          <el-input
            placeholder="请输入内容"
            v-model="search"
            class="input-with-select"
            style="width: 350px; float: right"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchBtn"
            ></el-button>
          </el-input>
        </div>

        <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column
            prop="resourceName"
            label="资源名称"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="资源分类"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.resourceType == 0 ? "数据资源" : "" }}
              {{ scope.row.resourceType == 1 ? "服务资源" : "" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="resourceDept"
            label="资源提供方"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="申请方式"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.sqfs == 0 ? "数据库" : "" }}
              {{ scope.row.sqfs == 1 ? "API接口" : "" }}
              {{ scope.row.sqfs == 2 ? "文件" : "" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="申请时间"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="审批时间"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.updateTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="spzt"
            label="审批状态"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.spzt == 0 ? "待审批" : "" }}
              {{ scope.row.spzt == 1 ? "通过" : "" }}
              {{ scope.row.spzt == 2 ? "驳回" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="syzt" label="使用状态" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.syzt === 0 ? "使用中" : "" }}
              {{ scope.row.syzt === 1 ? "已停用" : "" }}
            </template>
          </el-table-column>
<!--          <el-table-column-->
<!--            fixed="right"-->
<!--            label="操作"-->
<!--            width="250"-->
<!--            align="center"-->
<!--          >-->
<!--            <template slot-scope="scope">-->
<!--              <el-button type="text" size="small" @click="checkBtn(scope.row)"-->
<!--                >查看</el-button-->
<!--              >-->
<!--              <el-button-->
<!--                type="text"-->
<!--                size="small"-->
<!--                v-if="tab.type == 0"-->
<!--                @click="exchangeHistory(scope.row)"-->
<!--                >交换历史</el-button-->
<!--              >-->
<!--              <el-button-->
<!--                type="text"-->
<!--                size="small"-->
<!--                @click="deactivateBtn(scope.row)"-->
<!--                :disabled="scope.row.status === 1 && !view"-->
<!--                >停用</el-button-->
<!--              >-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>

        <div style="display: flex; justify-content: flex-end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="prev, pager, next, sizes, jumper"
            :total="totalNum"
          >
          </el-pagination>
        </div>
<!--        <el-dialog-->
<!--          title="导出服务资源文档"-->
<!--          :visible.sync="importDocumentsTc"-->
<!--          width="60%"-->
<!--        >-->
<!--          <div style="display: flex; justify-content: flex-end">-->
<!--            <el-input-->
<!--              placeholder="服务名称"-->
<!--              v-model="search"-->
<!--              class="input-with-select"-->
<!--              style="width: 300px"-->
<!--            >-->
<!--              <el-button-->
<!--                slot="append"-->
<!--                icon="el-icon-search"-->
<!--                @click="searchBtn"-->
<!--              ></el-button>-->
<!--            </el-input>-->
<!--          </div>-->
<!--          <el-table-->
<!--            :data="tableData"-->
<!--            border-->
<!--            style="width: 100%; margin-top: 10px"-->
<!--          >-->
<!--            <el-table-column-->
<!--              fixed-->
<!--              prop="resourceName"-->
<!--              label="资源名称"-->
<!--              width="200"-->
<!--              align="center"-->
<!--              :show-overflow-tooltip="true"-->
<!--            >-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="resourceType"-->
<!--              label="资源分类"-->
<!--              width="120"-->
<!--              align="center"-->
<!--            >-->
<!--              <template slot-scope="scope">-->
<!--                {{ scope.row.resourceType == 0 ? "数据资源" : "" }}-->
<!--                {{ scope.row.resourceType == 1 ? "服务资源" : "" }}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="resourceDept"-->
<!--              label="资源提供方"-->
<!--              width="120"-->
<!--              align="center"-->
<!--            >-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="sqfs"-->
<!--              label="申请方式"-->
<!--              width="120"-->
<!--              align="center"-->
<!--            >-->

<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="createTime"-->
<!--              label="申请时间"-->
<!--              width="200"-->
<!--              align="center"-->
<!--            >-->
<!--              <template slot-scope="scope">-->
<!--                {{ scope.row.createTime | formatDate }}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="updateTime"-->
<!--              label="审批时间"-->
<!--              width="200"-->
<!--              align="center"-->
<!--            >-->
<!--              <template slot-scope="scope">-->
<!--                {{ scope.row.updateTime | formatDate }}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="syzt"-->
<!--              label="状态"-->
<!--              width="120"-->
<!--              align="center"-->
<!--            >-->
<!--              <template slot-scope="scope">-->
<!--                {{ scope.row.syzt == 0 ? "在用" : "" }}-->
<!--                {{ scope.row.syzt == 1 ? "停用" : "" }}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            &lt;!&ndash;          <el-table-column&ndash;&gt;-->
<!--            &lt;!&ndash;            fixed="right"&ndash;&gt;-->
<!--            &lt;!&ndash;            label="操作"&ndash;&gt;-->
<!--            &lt;!&ndash;            width="250"&ndash;&gt;-->
<!--            &lt;!&ndash;            align="center"&ndash;&gt;-->
<!--            &lt;!&ndash;          >&ndash;&gt;-->
<!--            &lt;!&ndash;            <template slot-scope="scope">&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-button type="text" size="small" @click="checkBtn(scope.row)"&ndash;&gt;-->
<!--            &lt;!&ndash;                >查看</el-button&ndash;&gt;-->
<!--            &lt;!&ndash;              >&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-button&ndash;&gt;-->
<!--            &lt;!&ndash;                type="text"&ndash;&gt;-->
<!--            &lt;!&ndash;                size="small"&ndash;&gt;-->
<!--            &lt;!&ndash;                v-if="tab.type == 0"&ndash;&gt;-->
<!--            &lt;!&ndash;                @click="exchangeHistory(scope.row)"&ndash;&gt;-->
<!--            &lt;!&ndash;                >交换历史</el-button&ndash;&gt;-->
<!--            &lt;!&ndash;              >&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-button&ndash;&gt;-->
<!--            &lt;!&ndash;                type="text"&ndash;&gt;-->
<!--            &lt;!&ndash;                size="small"&ndash;&gt;-->
<!--            &lt;!&ndash;                @click="deactivateBtn(scope.row)"&ndash;&gt;-->
<!--            &lt;!&ndash;                :disabled="scope.row.status === 1 && !view"&ndash;&gt;-->
<!--            &lt;!&ndash;                >停用</el-button&ndash;&gt;-->
<!--            &lt;!&ndash;              >&ndash;&gt;-->
<!--            &lt;!&ndash;            </template>&ndash;&gt;-->
<!--            &lt;!&ndash;          </el-table-column>&ndash;&gt;-->
<!--          </el-table>-->
<!--          <div style="display: flex; justify-content: flex-end">-->
<!--            <el-pagination-->
<!--              @size-change="handleSizeChange1"-->
<!--              @current-change="handleCurrentChange1"-->
<!--              :current-page="currentPage"-->
<!--              :page-size="pageSize1"-->
<!--              :page-sizes="[10, 20, 50, 100]"-->
<!--              layout="prev, pager, next, sizes, jumper"-->
<!--              :total="totalNum1"-->
<!--            >-->
<!--            </el-pagination>-->
<!--          </div>-->
<!--          <span slot="footer" class="dialog-footer">-->
<!--            <el-button @click="importDocumentsTc = false">取 消</el-button>-->
<!--            <el-button type="primary" @click="confirmExport">确 定</el-button>-->
<!--          </span>-->
<!--        </el-dialog>-->
      </el-tab-pane>
    </el-tabs>
<!--    <div-->
<!--      v-show="show"-->
<!--      class="t4_r t4_r_sj phone_css"-->
<!--      style="height: auto; min-height: 560px"-->
<!--    >-->
<!--      <div class="listToggle backBtn">-->
<!--        <el-button size="small" type="primary" @click="show = false"-->
<!--          >返回列表</el-button-->
<!--        >-->
<!--      </div>-->
<!--      <dataInfo-->
<!--        :resourceCode="resourceCode"-->
<!--        :updateCycleList="updateCycleList"-->
<!--        :shareTypeList="shareTypeList"-->
<!--        :ShareModeList="ShareModeList"-->
<!--        v-show="showDataInfo"-->
<!--        :resTpye="['数据资源', '服务资源'][resourceType]"-->
<!--      ></dataInfo>-->
<!--      <dataInfo1-->
<!--        :updateCycleList="updateCycleList"-->
<!--        :shareTypeList="shareTypeList"-->
<!--        :ShareModeList="ShareModeList"-->
<!--        v-show="showDataInfo1"-->
<!--        :resTpye="['数据资源', '服务资源'][resourceType]"-->
<!--      ></dataInfo1>-->
      <tableFz v-show="showTable" :apiCode="apiCode"></tableFz>
<!--    </div>-->
  </div>
</template>
<script>
import {
  getMyDataList,
  getMyApiList,
  getUpdateCycle,
  getStopData,
  getExportApiWord,
} from "@/utils/httpUtils";
import dataInfo from "@/views/dataDirectory/dataInfo";
import dataInfo1 from "@/views/serviceDirectory/dataInfo";
import tableFz from "@/views/personalCenter/components/table";
export default {
  components: {
    dataInfo,
    dataInfo1,
    tableFz,
  },
  data() {
    return {
      resourceCode: "",
      apiCode: "", // 初始化为空字符串
      showDataInfo: false,
      showDataInfo1: false,
      showTable: false,
      view: false,
      multipleSelection: [],
      show: false,
      infoFlag: false,
      tabList: [
        {
          label: "数据资源",
          name: "dataResource",
          content: "这是数据资源的内容。",
          type: 0,
        },
        {
          label: "服务资源",
          name: "serviceResource",
          content: "这是服务资源的内容。",
          type: 1,
        },
      ],
      // importDocumentsTc: false,
      currentPage: 1,
      pageNo: 1,
      pageSize: 10,
      totalNum: 0,
      currentPage1: 1,
      pageNo1: 1,
      pageSize1: 10,
      totalNum1: 0,
      search: "",
      activeName: "dataResource",
      tableData: [],
      tableData1: [],
      resourceType: 0,
      updateCycleList: [],
      shareTypeList: [],
      ShareModeList: [],
    };
  },
  mounted() {
    this.getList();
  //   //获取更新频率字段
  //   getUpdateCycle("updateCycle").then((res) => {
  //     if (res) {
  //       this.updateCycleList = res.data;
  //     }
  //   });
  //   // 获取共享类型字段
  //   getUpdateCycle("shareType").then((res) => {
  //     if (res) {
  //       this.shareTypeList = res.data;
  //     }
  //   });
  //   // 获取共享方式字段
  //   getUpdateCycle("ShareMode").then((res) => {
  //     if (res) {
  //       this.ShareModeList = res.data;
  //     }
  //   });
  },
  //   处理1703592547000 时间格式
  filters: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
  methods: {
    // 停用
    // deactivateBtn(row) {
    //   getStopData({
    //     code: row.resourceCode,
    //     id: row.authType,
    //   }).then((res) => {
    //     if (res.code == "000000") {
    //       this.getList();
    //       this.getMyApiListFn();
    //     }
    //   });
    // },
    // 选中
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return item.resourceCode;
      });
    },
    // 确认导出
    confirmExport() {
      if (this.multipleSelection == "") {
        this.$message({
          message: "请选择",
          type: "warning",
        });
      } else {
        getExportApiWord({
          resourceCodes: this.multipleSelection.join(","),
        }).then((res) => {
          const blob = new Blob([res], { type: "text/html" });
          const url = URL.createObjectURL(blob);

          const a = document.createElement("a");
          a.href = url;
          a.download = "下载.docx";

          document.body.appendChild(a);
          a.click();

          document.body.removeChild(a);
          URL.revokeObjectURL(url);
          this.$message({
            message: "下载中",
            type: "success",
          });
        });
      }
    },
    // drwd() {
    //   this.importDocumentsTc = true;
    // },
    // 查看
    // checkBtn(row) {
    //   this.resourceType = row.resourceType;
    //   if (row.resourceType === 0) {
    //     this.showDataInfo = true;
    //     this.showDataInfo1 = false;
    //     this.showTable = false
    //     this.$bus.$emit("busInfo", row.resourceCode);
    //     this.$bus.$emit("infoList1", this.tableData);
    //     this.resourceCode = row.resourceCode;
    //     this.show = true;
    //   } else if (row.resourceType === 1) {
    //     this.showDataInfo = false;
    //     this.showDataInfo1 = true;
    //       this.showTable = false
    //     this.$bus.$emit("busInfo", row.resourceCode);
    //     this.$bus.$emit("infoList1", this.tableData);
    //     this.show = true;
    //   }
    // },
    // exchangeHistory(row) {
    //   this.apiCode = row.apiCode; // 将row.apiCode赋值给apiCode
    //   this.showTable = true;
    //   this.showDataInfo = false;
    //   this.showDataInfo1 = false;
    //   this.show = true;
    // },
    handleClick(tab, event) {
      console.log(tab.label)
      // 数据资源
      if (tab.label == "数据资源") {
      this.resourceType = 0
        this.getList()
      } else if (tab.label == "服务资源") {
      this.resourceType = 1
        this.getList()
      }
    },
    // 数据资源
    getList() {
      getMyDataList({
        requestType:0,
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        keyWord: this.search,
        resourceType:this.resourceType
      }).then((res) => {
        console.log(res,"123123123321-----")
        this.tableData = res.content
        // this.currentPage = res.data.currentPage;
        this.totalNum = res.totalElements;
        this.search = "";
      }).catch(err=>{
        console.log(err,"123123")
      })
    },
    // getMyApiListFn() {
    //   getMyDataList({
    //     requestType:0,
    //     pageNum: this.pageNo,
    //     pageSize: this.pageSize,
    //     keyWord: this.search,
    //     resourceType:1
    //   }).then((res) => {
    //     console.log(res,"123123")
    //     this.tableData1 = res.content
    //     // this.currentPage = res.data.currentPage;
    //     this.totalNum = res.totalElements;
    //     this.search = "";
    //   });
    // },
    // 服务资源
    searchBtn() {
      if (this.activeName === "dataResource") {
        this.getList(); // 调用数据资源的搜索方法
      } else if (this.activeName === "serviceResource") {
        this.getList();// 调用服务资源的搜索方法
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getList();
    },
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.getList();
    },
    handleCurrentChange1(val) {
      this.pageNo1 = val;
      this.getList();
    },
  },
};
</script>
